<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="flashsaleRule" :model="flashsaleForm" label-position="left" label-width="140px">
      <el-form-item label="适用对象" prop="title">
        <el-checkbox-group v-model="flashsaleForm.clienteteType">
          <el-checkbox label="注册新用户" value="2"></el-checkbox>
          <el-checkbox label="后台导入用户" value="3"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="适用区域" prop="title">
        <el-checkbox-group v-model="flashsaleForm.districtIDs">
          <el-checkbox v-for="(district,index) in distrcitOptions" :key="index" :label="district.title" :value="ditrict.ID"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="有效期">
        <el-date-picker 
          v-model="flashsaleForm.beginTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始日期"
          align="right"
        />
        <el-date-picker 
          v-model="flashsaleForm.endTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始日期"
          align="right"
        />
      </el-form-item>
      <el-form-item label="赠送优惠卷" prop="products">
        
    <el-table
      key="couponList"
      :data="flashsaleForm.product"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      >
      <el-table-column label="优惠卷" min-width="200">
        <template slot-scope="{row}">
          <el-input readonly="readonly" v-model="row.productName" />
        </template>
      </el-table-column>
      <el-table-column label="数量" max-width="150px">
        <template slot-scope="{row}">
          <el-input v-model="row.quantity" />
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button size="mini" type="danger" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-button type="primary" @click="newCoupon()">
        新产品
      </el-button>

      </el-form-item>
      <el-form-item label="赠送产品" prop="code">
        
    <el-table
      key="waybillShopping"
      :data="flashsaleForm.product"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      >
      <el-table-column label="产品" min-width="200">
        <template slot-scope="{row}">
          <el-input readonly="readonly" v-model="row.productName" />
        </template>
      </el-table-column>
      <el-table-column label="图片" min-width="100px">
        <template slot-scope="{row}">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.logo"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="数量" max-width="150px">
        <template slot-scope="{row}">
          <el-input v-model="row.quantity" />
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button size="mini" type="danger" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-button type="primary" @click="newProduct()">
        新产品
      </el-button>

      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="flashsaleForm.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCannel()">
        取消
      </el-button>
      <el-button type="primary" @click="createData()">
        确认
      </el-button>
    </div>
  </div>
</template>

<script>
import { saveFlashsale, removeFlashsaleByID, getFlashsaleDetail } from '@/api/promotion/flashsale'
import waves from '@/directive/waves' // waves directive
import { } from '@/utils'

export default {
  name: 'ComplexTable',
  components: { },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      tableKey: 0,
      flashsaleForm: {
        title: '',
        districtIDs:[],
        clienteteType:[],
        product:[
          {
            productName:"",
            logo:"",
            quantity:1,
            price:"",
            originalPrice:"",
            useCoupon:"1"
          }
        ],
        status: {
          label: '',
          value: 1
        }
      },
      distrcitOptions:[],
      flashsaleRule: []
    }
  },
  created() {
    let flashsaleID = this.$route.query && this.$route.query.flashsaleID
    if (flashsaleID !== undefined) {
      flashsaleID = parseInt(flashsaleID)
      if (!isNaN(flashsaleID)) {
        this.listLoading = true
        const formData = {
          'flashsaleID': flashsaleID
        }
        getFlashsaleDetail(formData).then(response => {
          if (response.status === 200) {
            this.flashsaleForm = response.data
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }
    }
    console.log(flashsaleID)
  },
  methods: {
    newProduct:function(){
      this.flashsaleForm.product.push({
            productName:"",
            logo:"",
            quantity:1,
            price:"",
            originalPrice:"",
            useCoupon:"1"
      })
    },
    handleCannel() {
      this.$router.push({ path: 'flashsale' })
    },
    createData() {
      const _flashsaleForm = this.flashsaleForm
      if (_flashsaleForm.ID > 0) {
        _flashsaleForm.flashsaleID = _flashsaleForm.ID
      }
      try {
          _flashsaleForm.status = _flashsaleForm.status.value
      } catch (error) {
          _flashsaleForm.status = 1
      }
      _flashsaleForm.product = JSON.stringify(_flashsaleForm.product)
      saveFlashsale(_flashsaleForm).then(response => {
        if (response.status === 200) {
          this.$message({
            message: '操作Success',
            type: 'success'
          })
          this.$router.push({ path: 'flashsale' })
        } else {
          _flashsaleForm.product = JSON.parse(_flashsaleForm.product)
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    },
    handleDelete(row, index) {
      const _this = this
      const formData = {
        'flashsaleID': row.ID
      }
      console.log(index)
      removeFlashsaleByID(formData).then(response => {
        if (response.status === 200) {
          this.$message({
            message: '操作Success',
            type: 'success'
          })
          _this.$router.push({ path: 'flashsale' })
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
